<template>
  <div class="containers">
    <div class="container">
      <div class="form-box" style="width: 100%; max-width: 900px">
        <el-tabs>
          <el-tab-pane label="微信设置">
            <el-form ref="form" label-width="120px">
              <el-form-item label="小程序appID">
                <el-input v-model="form.xcx_app_id"></el-input>
              </el-form-item>
              <el-form-item label="小程序密钥">
                <el-input v-model="form.xcx_secret"></el-input>
              </el-form-item>
              <el-form-item label="公众号appID">
                <el-input v-model="form.gzh_app_id"></el-input>
              </el-form-item>
              <el-form-item label="公众号密钥">
                <el-input v-model="form.gzh_secret"></el-input>
              </el-form-item>
              <el-form-item label="微信商户号">
                <el-input v-model="form.merchant"></el-input>
              </el-form-item>
              <el-form-item label="微信序列号">
                <el-input v-model="form.serial"></el-input>
              </el-form-item>
              <el-form-item label="V3 密钥">
                <el-input v-model="form.v3"></el-input>
              </el-form-item>
              <el-form-item label="回调URL">
                <el-input v-model="form.notify_url"></el-input>
              </el-form-item>
              <el-form-item label="上传文件">
                <input type="file" ref="filElem" @change="onChange" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="setlv()">确 定</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ShibangHtRelease",

  data() {
    return {
      apiclient_key: "",
      form: {
        app_id: "",
        secret: "",
        merchant: "",
        serial: "",
        v3: "",
        apiclient_key: "",
        code: "1",
        notify_url: "",
      },
      upimg: {
        token: "",
        key: new Date().valueOf(),
      },
      upload: "",
      formdata: "",
    };
  },
  created() {
    this.getData();
  },
  mounted() { },

  methods: {
    onChange(event) {
      var that = this;
      const inputFile = this.$refs.filElem.files[0];
      this.form.apiclient_key = inputFile;
      this.formdata = new FormData();
      this.formdata.append("xcx_app_id", that.form.xcx_app_id);
      this.formdata.append("xcx_secret", that.form.xcx_secret);
      this.formdata.append("gzh_app_id", that.form.gzh_app_id);
      this.formdata.append("gzh_secret", that.form.gzh_secret);
      this.formdata.append("merchant", that.form.merchant);
      this.formdata.append("serial", that.form.serial);
      this.formdata.append("v3", that.form.v3);
      this.formdata.append("notify_url", that.form.notify_url);
      if (inputFile) {
        this.formdata.append("apiclient_key", that.form.apiclient_key);
        this.formdata.append("code", that.form.code ? 1 : 1);
      } else {
        this.formdata.append("code", that.form.code ? 0 : 0);
      }
    },
    // 上传图片
    handleAvatarSuccess(res, file) {
      this.form.apiclient_key = this.url + res.key;
      this.apiclient_key = URL.createObjectURL(file.raw);
    },
    beforeupload(file) {
      // if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
      //   this.$message.error('上传头像图片只能是 JPG、PNG 格式!');
      //   return false;
      // }
      let types = file.name.split("."); //获取图片格式
      this.upimg.key =
        "template/home/" + new Date().valueOf() + "." + types[types.length - 1];
    },
    setlv() {
      this.onChange();

      const inputFile = this.$refs.filElem.files[0];
      if (this.formdata.code && (inputFile == undefined)) {
        this.$message.error("请上传文件");
        return;
      }
      console.log("this.formdata", this.formdata);
      this.$http({
        url:  `${this.mainurl}admin/wxServiceSet/`,
         method: 'post',

         headers: {
           'Content-Type': 'multipart/form-data',
           'token': localStorage.getItem('admin_token_sys')
         },
         data: this.formdata,
         dataType: "json",
         cache: false, //上传文件无需缓存
         processData: false, //用于对data参数进行序列化处理 这里必须false
         contentType: false, //必须
      }).then((res) => {
        this.$message.success(res.data.errmsg);
        this.getData();
      });

      // this.request('admin/wxSet/', 'POST',this.formdata).then(res => {
      //     if(res.errno==0){
      //         this.$message.success(res.errmsg);
      //         this.getData()
      //     }else{
      //         this.$message.error(res.errmsg);
      //     }
      // })
    },
    getData() {
      this.request("admin/wxServiceSet/", "GET").then((res) => {
        // if(){
        this.form = res.data;
        console.log(res.data);
        // }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
